@import "../../css/var";

.loading {
  display: inline-block;

  ul {
    display: inline-flex;

    li {
      width: 0.08rem;
      height: 0.08rem;
      border-radius: 50%;
      margin: 0.1rem 0.06rem;
      background: $primary;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 0 solid rgba(0, 0, 0, 0.1);
      }
    }

    li:nth-child(1) {
      animation: blink 3s linear infinite;
    }

    li:nth-child(1)::before {
      animation: diffusion 3s linear infinite;
    }

    li:nth-child(2) {
      animation: blink 3s linear infinite 0.1s;
    }

    li:nth-child(2)::before {
      animation: diffusion 3s linear infinite 0.1s;
    }

    li:nth-child(3) {
      animation: blink 3s linear infinite 2s;
    }

    li:nth-child(3)::before {
      animation: diffusion 3s linear infinite 2s;
    }
  }
}

@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

@keyframes diffusion {
  50% {
    border: 0.1rem solid rgba(0, 0, 0, 0.0);
  }
}
